@import '../../src/styles/index.scss';
@import 'markdown.css';
@import 'syntax.css';
@import url('https://fonts.googleapis.com/css?family=Roboto');

@font-face {
  font-family: 'proxima-nova';
  src: url('../../src/fonts/proximanova-regular.woff');
}

body {
  background-color: #f5f4f4;
  /* Taken from theme/fonts */
  font-family: 'proxima-nova', Helvetica, Arial, sans-serif;
  text-align: left;
}

.styleguide-page,
.components-page {
  margin: 0 auto;
}

.style-guide-page-body,
.component-example-page {
  text-align: left;
  padding: 20px;
  max-width: 1440px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

h3 {
  margin-left: 0;
}

a {
  display: block;
}

.prop-table .header {
  border-bottom: 1px solid black;
}

.prop-table th {
  min-width: 100px;
}

.component-demo {
  position: relative;
}

.landing-page {
  max-width: 1024px;
  margin: 0 auto;
  .weave-grid-column {
    min-width: 220px;
  }
}

.content-section {
  margin-bottom: 50px;
}

.nav {
  margin-top: 40px;
}

.logo {
  position: relative;
  margin: 10px;
  padding: 10px 0 10px 0;
}

.header {
  border-bottom: 1px solid #aaa;
  border-bottom-width: 1px;
  width: 100%;
  overflow: hidden;

  a {
    display: inline-block;
  }

  .weave-menu-item {
    display: inline-block;
    padding: 0 10px 0 10px;
  }

  .logo {
    margin: 0;
    padding: 8px 0 0 8px;
    height: 50px;
    width: 200px;
  }

  .weave-grid-row {
    margin: 0;
  }

  .weave-grid-column {
    min-width: 200px;
  }
}

.description p code {
  display: inline-block;
}

a:-webkit-any-link {
  text-decoration: none;
}

.big-nav-button {
  background-color: #ffffff;
  box-shadow: 0 1px 3px #c7c7c7, 0 1px 2px #c7c7c7;
  border-radius: 2px;
  display: block;
  height: 250px;
  margin-top: 100px;
  position: relative;
  text-align: center;
  min-width: 220px;

  &:hover {
    cursor: pointer;
    box-shadow: 0 1px 10px #ccc, 0 1px 8px #ccc;
    background-color: #3c3c5b;
    color: #f5f4f4;
    path,
    g {
      fill: #fff;
    }
  }

  svg {
    height: 200px;
    width: 200px;
  }
}

.demo-wrap {
  padding: 5px;
  overflow: auto;

  & > div {
    width: 100%;
  }
}
